<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>预览一下</title>
    <!-- 基本框架 -->
    <link rel="stylesheet" href="../../../css/common.css">
    <link rel="stylesheet" href="../task/css/detail.css">
    <script src="../../../script/vue.min.js" type="text/javascript"></script>
    <script src="../../../script/frame.js" type="text/javascript"></script>
    <script src="../../../script/baseConfig.js" type="text/javascript"></script>
	<script src="../../../script/utils.js" type="text/javascript"></script>
	<script src="../../../script/common.js" type="text/javascript"></script>
	<style>
		.u-require{
			margin-bottom:0!important;
		}
		input[disabled]{background:#F6F6F6;color:#333;opacity: 1;}
	</style>
</head>
<body>
	<div id="app" v-cloak>
		<div class="container">
			<div class="taskBasic">
				<div class="info clearfix">
					<img :src="taskLink.iconUrl" />
					<div>
						<h3 class="ell">
							{{taskLink.name}}
						</h3>
						<span class="ell">
							刚刚发布
						</span>
					</div>
				</div>
				<div class="progress">
					<i class="over" style="width: 0;" ></i>
				</div>
				<div class="clearfix twoLine">
					<div class="inlineInfo price ell">
						悬赏价格：
						<font>
							{{taskLink.price}}
							<i>元</i>
						</font>
					</div>
				</div>
				<div class="inlineInfo u-require"
					style="padding-bottom: .6rem;"
					v-if="taskLink.claim"
				>
					<span class="_title">
						任务要求：
					</span>
					{{taskLink.claim}}
				</div>
			</div>
			<div class="instroduce clearfix">
				<div class="ell">
					<img src="../../../image/task/taskdetail1.png" />极速做单
				</div>
				<div class="ell">
					<img src="../../../image/task/taskdetail2.png" />闪电审核
				</div>
				<div class="ell">
					<img src="../../../image/task/taskdetail3.png" />大量任务
				</div>
			</div>
			<div class="m-step">
				<div class="step stepDom">
					<div class="ftitle">任务步骤</div>
					<div class="step_content clearfix"
						v-for="(stepItem,stepIndex) of taskSteps"
						:key="stepIndex"
					>
						<i>{{stepIndex + 1}}</i>
						<div class="info">
							<h3 class="h3">
								第
									{{stepIndex + 1}}
								步
								<i v-if="isCollect(stepItem)">
									有收集
								</i> 
							</h3>
							<template
								v-for="(cntItem,contIndex) of stepItem"
								:key="stepIndex + contIndex"
							>
								<template 
									v-if="cntItem.type === 'Description'"
								>
									<div class="intrText">
										{{cntItem.value}}
									</div>
								</template>
								<template
									v-if="cntItem.type === 'Operable'"
								>
									<div class="btnText" >
										<div class="text"> 
											<!-- <div> -->
												{{cntItem.target.type}}：
											<!-- </div> -->
											<span class="_link copyDom"
												@click="handCoypLink(cntItem.target.value)"
											>
												{{cntItem.target.value}}
											</span>
										</div>
										<!-- <div class="btn clearfix">
											<a v-for="(btns,btnIndex) of cntItem.target.content"
												@click="handleSpec(btns)"
												:key="btnIndex"
											>
												{{btns}}
											</a>
										</div> -->
									</div>
								</template>
								<template  v-if="cntItem.type === 'CollectTextInfo'">
									<div class="task_input flex"
									>
										<input type="text" 
											class="flex1"
											disabled="true"
											:placeholder="'请输入'+cntItem.placeholder"
										/>
									</div>
								</template>
								<template
									v-if="Array.isArray(cntItem)"
								>
									<div class="img clearfix">
										<div v-for="(arrItem,arrIndex) of cntItem"
											:key="arrItem.type + arrIndex"
											class="item" 
											@click="handleImg(arrItem.type,arrItem,stepIndex,contIndex,arrIndex)"
										>
			
											<img
												class="comImgwh"
												:src="selectShowImg(arrItem.type,arrItem,stepIndex,contIndex,arrIndex)"
											/>
											<span 
												v-if="arrItem.type === 'Gallery'"
											>
												示例图
											</span>
										</div>
									</div>
								</template>
							</template>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		apiready = function() {
			var photoBrowser = api.require('photoBrowser');
			var clipBoard = api.require('clipBoard');
			var app = new Vue({
				el:'#app',
				data:{
					taskLink: {
						name: '',
						price: '',
						iconUrl: '',
						claim: '',
					},
					taskSteps: [],
					iosTest:false,
				},
				created() {
					console.log(JSON.stringify(this.getPageParam()))
					let params = this.getPageParam().data;
					this.taskLink = params.taskLink;
					this.taskSteps = params.taskSteps;
				},
				methods:{
					getPageParam: function() {
						return api.pageParam;
					},
					/**
					 *  是否需要步骤操作
					 *
					 */
					isCollect(stepItem) {
						for(var i = 0;i<stepItem.length;i++) {
							var curContent = stepItem[i];
							if (curContent.type === 'CollectTextInfo') {
								return true;
							}
							if (Array.isArray(curContent)) {
								return true;
							}
						}
						return false;
					},
					handCoypLink(text) {
						this.copyText(text);
					},
					handleSpec(btnObj,text) {
						var that = this;
						var execute = {
							'copy': function(){
								that.copyText(text);
							},
							'useWeb': function() {
								// 去除首尾两端空格
								text = text.replace(/(^\s*)|(\s*$)/g, "");
								api.openApp({
									uri: text,
									iosUrl: text,
								}, function(ret, err) {
									if (!ret) {
										api.toast({
											msg: '打开浏览器失败',
											duration: 2000,
											location: 'bottom'
										});
									}
								});
							},
							'openApp': function() {
								// 去除首尾两端空格
								text = text.replace(/(^\s*)|(\s*$)/g, "");
								var ext = btnObj.ext;
								var path = ext;
								if (ext.indexOf('$1') != -1) {
									text = text.replace(/https:\/\//, "")
									path = path.replace(/{\$1}/, text)
								}
								api.openApp({
									uri: path,
									iosUrl: path,
								}, function(ret, err) {
									if (!ret) {
										api.toast({
											msg: btnObj.name+'失败',
											duration: 2000,
											location: 'bottom'
										});
									}
								});
							}
						}
						execute[btnObj.command]();
					},
					/**
					 *  文本复制
					 * @param {*} text 
					 */
					copyText(text) {
						clipBoard.set({
							value: text
						}, function(ret, err) {
							if (ret) {
								$.toast('复制成功');
							} else {
								$.toast('复制失败');
							}
						});
					},
					selectShowImg(type,arrItem,stepIndex,contIndex,arrIndex) {
						if (arrItem.uri) {
							return arrItem.uri;
						}
						return '../../../image/task/addImg2.png';
					},
					handleImg(type,arrItem,stepIndex,contIndex,arrIndex){
						if(arrItem.uri) {
							var type = utils.isFile(arrItem.uri);
							if (type && type === 'video') {
								api.openVideo({                         
									　　url: arrItem.uri
								});
							}else{
								this.openFile(arrItem.uri);
							}
						}
					},
					  // 图片预览
					openFile: function(fileUrl) {
						photoBrowser.open({
							images: [fileUrl],
							bgColor: '#000'
						}, function(photoRes, err) {
							if(photoRes && photoRes.eventType=="click"){
								photoBrowser.close();
							}
						});
					},  
				},
				mounted(){
					$.initJs(this);

				}
			})
		}
	</script>
</body>
</html>